<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notifications</title>
    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
           font-family: "Microsoft Yahei";
            background: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            position: relative;
        }
        .back-button {
            position: absolute;
            top: 20px;
            left: 20px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1.5em;
            color: #5a9bf6;
        }
        .container {
            width: 80%;
            max-width: 800px;
            background: #f9f9f9;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-top: 60px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        ul {
            list-style: none;
            padding: 0;
        }
        li {
            background: #91daf9;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 1.2em;
            color: #333;
        }
    </style>
</head>
<body>
    <button class="back-button" onclick="goBack()">
        <img src="../../../static/pictures/back.png" alt="Back" style="width: 15%; height: 15%;">
    </button>
    <div class="container">
        <h1>通知</h1>
        <ul id="notification-list">
            <!-- 通知项将通过JavaScript动态插入 -->
        </ul>
    </div>

    <script>
        const notifications = [
            "下周一的数学课改到下午2点。",
            "请记得提交你的科学项目报告，截止日期为本周五。",
            "历史考试将在下周三举行，复习材料已上传。",
            "本周五下午将有一场关于编程的讲座，欢迎参加。",
            "美术作业的提交日期延长至下周二。"
        ];

        const notificationList = document.getElementById('notification-list');

        function getRandomInt(max) {
            return Math.floor(Math.random() * max);
        }

        for (let i = 0; i < 5; i++) {
            const li = document.createElement('li');
            li.textContent = notifications[getRandomInt(notifications.length)];
            notificationList.appendChild(li);
        }

        function goBack() {
            window.location.href = '/stud_homepage'; // 将 'index.html' 替换为你的主页面路径
        }
    </script>
</body>
</html>
